
            <template>
              <div class="layout">
                <el-tabs type="border-card">
                  <el-tab-pane label="注册">
                <el-form ref="registerForm" :model="form"
                         label-position="right"
                         label-width="100px"
                         style="max-width: 460px"
                         class="loginForm"
                >
                  <el-form-item label="账号" prop="username">
                    <el-input type="text" v-model="form.username"></el-input>
                  </el-form-item>
                  <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="form.password"></el-input>
                  </el-form-item>
                  <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input type="password" v-model="form.confirmPassword"   @blur="confirmFunc"></el-input>
                  </el-form-item>
                  <el-form-item label="电话" prop="phone">
                    <el-input type="text" v-model="form.phone"  ></el-input>
                  </el-form-item>
<!--                  <el-form-item label="验证码" prop="captcha">-->
<!--                    <el-input v-model="form.captcha"  class="inpWidth"></el-input>-->
<!--                    <el-button @click="refreshCaptcha">获取验证码</el-button>-->
<!--                  </el-form-item>-->

                  <el-form-item label="姓：" prop="lastname">
                    <el-input type="text" v-model="form.lastname"></el-input>
                  </el-form-item>
                  <el-form-item label="名：" prop="firstname">
                    <el-input type="text" v-model="form.firstname"></el-input>
                  </el-form-item>
                  <el-form-item label="邮箱：" prop="email">
                    <el-input type="text" v-model="form.email"></el-input>
                  </el-form-item>
<!--                  <el-form-item label="status：" prop="email">-->
<!--                    <el-input type="text" v-model="form.status"></el-input>-->
<!--                  </el-form-item>-->
                  <el-form-item label="地址1：" prop="addre1">
                    <el-input type="text" v-model="form.addre1"></el-input>
                  </el-form-item>
                  <el-form-item label="地址2：" prop="addre2">
                    <el-input type="text" v-model="form.addre2"></el-input>
                  </el-form-item>
                  <el-form-item label="城市：" prop="city">
                    <el-input type="text" v-model="form.city"></el-input>
                  </el-form-item>
                  <el-form-item label="州：" prop="state">
                    <el-input type="text" v-model="form.state"></el-input>
                  </el-form-item>
                  <el-form-item label="邮编：" prop="postalCode">
                    <el-input type="text" v-model="form.postalCode"></el-input>
                  </el-form-item>
                  <el-form-item label="国家：" prop="country">
                    <el-input type="text" v-model="form.country"></el-input>
                  </el-form-item>
                  <el-form-item label="语言：" prop="languagePreference">
<!--                    <el-input type="text" v-model="form.languagePreference"></el-input>-->
                    <el-select v-model="form.languagePreference" placeholder="请选择语言">
                      <el-option v-for="language in languages" :key="language" :label="language" :value="language"></el-option>
                    </el-select>
                  </el-form-item>



                <el-form-item label="口味偏好：" prop="favouriteCategoryId">
<!--                    <el-input type="text" v-model="form.favouriteCategoryId"></el-input>-->
<!--                  </el-form-item>-->
                  <el-select v-model="form.favouriteCategoryId" placeholder="请选择口味">
                    <el-option v-for="flavor in flavors" :key="flavor" :label="flavor" :value="flavor"></el-option>
                  </el-select>
<!--                  <div>您选择的口味: {{ selectedFlavors }}</div>-->
                </el-form-item>




<!--                  <el-form-item label="选择列表：" prop="listOption">-->
                    <el-checkbox v-model="form.listOption" prop="listOption" >是否显示喜好</el-checkbox>
<!--                    <el-input type="text" v-model="form.listOption"></el-input>-->
<!--                  </el-form-item>-->
<!--                  <el-form-item label="横幅选项：" prop="bannerOption">-->
<!--                    -->
<!--                    <el-input type="text" v-model="form.bannerOption"></el-input>-->
<!--                  </el-form-item>-->
                  <el-checkbox v-model="form.bannerOption" prop="bannerOption">是否显示推荐</el-checkbox>



                  <el-form-item>
                    <el-button type="primary" @click="register">注册</el-button>
                    <el-button @click="resetForm">重置</el-button>
                  </el-form-item>
                </el-form>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </template>

            <script>
              import { ref } from 'vue';
              import { ElForm, ElFormItem, ElInput, ElButton } from 'element-plus';
              import { ElMessage } from "element-plus";
              import axios from "axios";
              import {useRouter} from "vue-router";
              import accountView from "@/views/main/AccountView.vue";

              export default {
                name: "RegisterView",

                components: {
                  ElForm,
                  ElFormItem,
                  ElInput,
                  ElButton,
                },
               setup() {
                  const form = ref({
                    username: '',
                    password: '',
                    confirmPassword:'',
                    phone:'',
                 //   captcha: '',
                    firstname:'',
                    lastname:'' ,
                    addre1:'',
                    addre2:'',
                    city:'',
                    state:'',
                    email:'',
                    postalCode:'',
                    country:'',
                    status:'',
                    favouriteCategoryId: '',
                    languagePreference:'',
                    listOption:'',
                    bannerOption:'',
                  });
                 const router = useRouter()
                  const register = () => {
                    // 处理注册逻辑
                    axios.post('http://127.0.0.1:8091/accounts/register', {

                      account : {
                        username: form.value.username,
                        email:form.value.email,
                        firstName: form.value.firstname,
                        lastName: form.value.lastname,
                        status:form.value.status,
                        address1: form.value.addre1,
                        address2: form.value.addre2,
                        city: form.value.city,
                        state: form.value.state,
                        zip: form.value.postalCode,
                        country: form.value.country,
                        phone: form.value.phone,

                        profile: {
                          username: form.value.username,
                          languagePreference: form.value.languagePreference,
                          favouriteCategoryId: form.value.favouriteCategoryId,
                          listOption:form.value.listOption,
                          bannerOption:form.value.bannerOption

                        },
                        bannerData: {
                          favouriteCategoryId: form.value.favouriteCategoryId,
                          bannerName: "<image <image src=\"../images/cats_icon.gif\"><font size=\"5\" color=\"blue\"> Cats</font>"
                        }
                      },
                      password: form.value.password,
                      repeatedPassword:form.value.confirmPassword,


                    }) .then(response => {

                      if(response.data.status===200){
                        alert("注册成功");
                        router.push({
                          path: 'mainPage'
                        })
                      }


                      else
                        alert("注册失败");
                    })
                        .catch(error => {
                          // 注册失败
                          // 处理错误情况，例如显示错误消息
                          alert("注册失败");
                        });
                    console.log('注册信息:', form.value);
                  };








                  const confirmFunc = () => {
                    if (form.value.confirmPassword !== form.value.password)
                      ElMessage.error("密码与确认密码不一致.");
                  };
                  const resetForm = () => {
                    form.value.username = '';
                    form.value.password = '';
                    form.value.confirmPassword = '';
                    form.value.firstname= '';
                    form.value.lastname = '';
                    form.value.addre1= '';
                    form.value.phone= '';
                  //  form.value.captcha= '';
                    form.value.addre2= '';
                    form.value.city= '';
                    form.value.state= '';
                    form.value.postalCode= '';
                    form.value.country= '';
                    form.value.captcha= '';
                    form.value.bannerOption='';
                    form.value.listOption='';
                    form.value.favouriteCategoryId='';
                    form.value.status='';
                    form.value.email='';
                    form.value.languagePreference='';





                  };
                  // const refreshCaptcha = () => {
                  //   axios
                  //       .post("http://127.0.0.1:8091/accounts/sendMsg?phone="+form.value. phone, {
                  //         params: {
                  //           phone: 15679315619// 替换为实际的 'phone' 参数值
                  //         }
                  //       })
                  //       .then(response => {
                  //         form.value.captcha = response.data.code;
                  //       })
                  //       .catch(error => {
                  //         console.error('Failed to get verification code:', error);
                  //       });
                  //   console.log('刷新验证码');
                  // };


                  //两处验证码有问题；





                 return {


                   flavors: ['乳酪', '水果', '慕斯', '坚果'],
                   selectedFlavor: '乳酪',
                   languages:['中文', '英文', '法语', '德语'],
                   selectedLanguage: '中文',
                    form,
                    register,
                    resetForm,
                    confirmFunc,
                  };
                },
              };
            </script>


<style scoped>
.layout {
  position:relative;
  left: calc(50% - 200px);
  top: 40%;
  width: 400px;
}
.loginBtn {
  width: 100px;
}
.loginForm {
  text-align: center;
}
.checkBox {
  margin-left: 7px;
}
.inpWidth {
  width: 165px;
}
</style>
